<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../assets/DM_20210709155319_001.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/DM_20210709155319_002.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/DM_20210709155319_003.jpg" alt="" />
      </swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-2"
        slot="pagination"
      ></div>
    </swiper>
    <!-- end  of  swiper  -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" v-for="n in 10" :key="n">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm d-flex ai-center jc-center">
        <i class="sprite sprite-arrow mr-2"></i>
        <span>收起</span>
      </div>
    </div>

    <!-- end of  nav icons -->
    
    <m-list-card icon="menu1" title="新闻资讯" :categories= "newsCats"> 
      <template #item="{category}">
        <router-link tag="div" :to="`/articles/${news._id}`" class="py-2 fs-lg d-flex" v-for="(news,i) in category.newsList" :key="i">
          <span class="text-info">[{{news.categoryName}}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-gray-1 fs-sm">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card icon="yingxiong" title="英雄列表" :categories= "heroCats"> 
      <template #item="{category}">
        <div class="d-flex flex-wrap">
          <router-link tag="div" :to="`/heroes/${hero._id}`" class="p-2 text-center" style="width:20%" v-for="(hero,i) in category.heroList" :key="i">
            <img :src="hero.avatar" class="w-100" alt="">
            <div>{{hero.name}}</div>
         </router-link>
      </div>
      </template>
    </m-list-card>

    <m-card icon="meun1" title="英雄列表"></m-card>
    <m-card icon="meun1" title="精彩视频"></m-card>
    <m-card icon="meun1" title="图文攻略"></m-card>
    <m-card icon="meun1" title="英雄攻略"></m-card>


    
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>

  </div>

</template>

<script>
import dayjs from 'dayjs'
export default {
  filters:{
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  name: "Home",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".pagination-home"
        }
      },
      newsCats: [],
      heroCats:[]
    };
  },
  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get('news/list')
      console.log(res);
      this.newsCats = res.data 
      console.log(this.newsCats);
    },
    async fetchHeorCats() {
      const res = await this.$http.get('heroes/list');
      this.heroCats = res.data 
    }
  },
  created() {
    this.fetchNewsCats(),
    this.fetchHeorCats()

  },
};
</script>

<style lang="scss">
@import "../assets/scss/variables";
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: none;
    }
  }
}</style
>>
